<template>
    <div class="w-full h-[calc(100%-30px)]">
        <el-dialog v-model="descVisible" title="商品描述信息" width="800">
            <div v-html="description"></div>
        </el-dialog>
        <AddIndex v-model:isShowAdd = "isShowAddDialog"/>
        <div class="h-[40px] flex items-center pl-[12px] mt-[12px] mb-[12px]">
            <el-button type="primary" @click="addDialog">添加</el-button>
            <el-button type="danger" class="ml-[12px]">删除</el-button>
        </div>
        <div class="h-[calc(100% - 40px)]">
            <el-table
                ref="multipleTableRef"
                :data="productList"
                >
                    <el-table-column type="selection" :selectable="selectable" width="55" />
                    <el-table-column property="name" label="名称"/>
                    <el-table-column property="description" label="描述">
                        <template #default="scope"><div class="cursor-pointer text-blue-400" @click="showDesc(scope.row)">点击查看描述</div></template>
                    </el-table-column>
                    <el-table-column property="address" label="操作"  width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="updateDialog">编辑</el-button>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>

                    </el-table-column>
                </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElTable, ElTableColumn ,ElButton} from 'element-plus';
import { ref } from 'vue';
import {useProduct } from "./useProduct";
import type { SpuItem } from "@/api/types"
import AddIndex from './add/index.vue';
const descVisible = ref(false);
const isShowAddDialog = ref(false);
const { productList } = useProduct();
const selectable = (row: SpuItem) => !["1", "2"].includes(row.id)
const description = ref("");
const showDesc = (row:SpuItem)=>{
    description.value = row.description;
    descVisible.value = true;
}

/**
 * 添加弹出框
 */
const addDialog = ()=> {
    isShowAddDialog.value = true;
}

/**
 * 修改弹出框
 */
const updateDialog = ()=> {
    isShowAddDialog.value = true;

}

</script>